import { Component, OnInit, ViewChild } from '@angular/core';
import {
  Canvas,
  Map,
  Marker,
  CircleMarker,
  Polyline,
  Polygon,
  Icon
} from 'leaflet';
import '@geoman-io/leaflet-geoman-free'; 
import { LayerService } from './layer/layer.service';
declare var AMap: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {

  @ViewChild('featureDlg', {static: true}) featureDlg: any;

  constructor(private layerService: LayerService) { }

  ngOnInit(): void {

    //创建高德Map
    const amap = new AMap.Map('amap', {
      navigationMode: 'classic',
      zooms: [1, 20],
      mapStyle: 'amap://styles/1e65d329854a3cf61b568b7a4e2267fd',
      features: ['road', 'point', 'bg'],
      viewMode: '2D'
    });
    //创建Leaflet Map
    const map = new Map('map', {
      renderer: new Canvas()
    });
    /* Icon.Default.imagePath = 'assets/images/map/';
    Icon.Default.prototype.options = {
      iconUrl: 'marker.svg',
      iconRetinaUrl: 'marker.svg',
      iconSize: [28, 28],
      iconAnchor: [14, 14],
      shadowUrl: null,
      shadowRetinaUrl: null,
      shadowSize: [0, 0]
    };  */
    /* Marker.prototype.options.icon = new Icon({
      iconUrl: 'marker.svg',
      iconSize: [28, 28],
      iconAnchor: [14, 14]
    });  */
    map.on('zoom', evt => {
      amap.setZoom(evt.target.getZoom(), true);
    });

    map.on('move', evt => {
      const pt = evt.target.getCenter();
      amap.setZoomAndCenter(evt.target.getZoom(), [pt.lng, pt.lat], true);
    });

    map.setView([30.873496, 120.131063], 15);

    map.pm.addControls({
      position: 'topleft'
    });

    this.layerService.init(map, this.featureDlg);
  }

  save() {
    this.layerService.save();
  }
}
